---
title: HTTP 跨域与 CORS
description: 讲解跨域资源共享（CORS）原理、相关头部及配置方法
---

# HTTP 跨域与 CORS

## 什么是跨域
跨域是指浏览器出于安全考虑，阻止网页向不同源（协议、域名、端口）发起请求。

## CORS 原理
CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种允许服务器声明哪些外部域可以访问资源的机制。

## CORS 相关头部字段
| 字段 | 作用 | 示例 |
|------|------|------|
| Access-Control-Allow-Origin | 允许的来源域 | Access-Control-Allow-Origin: * |
| Access-Control-Allow-Methods | 允许的方法 | Access-Control-Allow-Methods: GET, POST |
| Access-Control-Allow-Headers | 允许的请求头 | Access-Control-Allow-Headers: Content-Type |
| Access-Control-Allow-Credentials | 是否允许携带凭证 | Access-Control-Allow-Credentials: true |
| Access-Control-Expose-Headers | 可暴露的响应头 | Access-Control-Expose-Headers: X-Custom-Header |
| Access-Control-Max-Age | 预检请求缓存时间 | Access-Control-Max-Age: 3600 |

## CORS 请求类型
- **简单请求**：GET、POST、HEAD 且无特殊头部。
- **预检请求（OPTIONS）**：复杂请求会先发送 OPTIONS 询问服务器是否允许。
- **带凭证请求**：如携带 Cookie，需服务器允许并设置 `Access-Control-Allow-Credentials: true`。

## 配置示例
**Node.js Express：**
```js
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});
```

## 注意事项
- `Access-Control-Allow-Origin` 不建议设置为 `*` 时允许携带凭证。
- 预检请求会增加一次网络开销。
- CORS 仅浏览器强制，服务端和非浏览器客户端不受限制。

## 参考资料
- [MDN Web Docs: CORS](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)